<template>
	<view style="padding: 20rpx 32rpx;">
		<view class="usermain u-bdr-12">
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">类别</view>
				
				
				<!-- <view class="type_item_box">
					<view class="t_item" v-for="(item, index) in list" :key="index" :class='classifyId==item.classificationId?"active":""' @click="chooseType(item)">{{item.classificationName}}</view>
				 -->
				<view class="valuscss">
					<view class="cu-form-group">
						<u-radio-group @change='changeType' v-model="typeRadio">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.classificationName">
								{{item.classificationName}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">标题</view>
				<view class="valuscss">
					<input type="text" v-model="title" placeholder="请输入标题" style="font-weight: 500;
font-size: 24rpx;
color: #333333;" />
				</view>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text">封面图</view>
				<view class="valuscss">
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button open-type="chooseAvatar" @chooseavatar="onChooseTitleImg">
						<image style="width: 111rpx;height: 111rpx;" :src="titleImg?titleImg:require('@/hl/upload_logo.png')"></image>
					</button> -->
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<!-- <image :src="titleImg?titleImg:require('@/hl/upload_logo.png')" mode="" @click="uploadImgTitleImg"
						style="width: 111rpx;height: 111rpx;"></image> -->

					<view style="display: flex;flex-wrap: wrap;">

						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;" v-if='titleImg'
							@click.stop="previewImage(0,[titleImg])">
							<image src='../../static/images/me/closeIconss.png'
								style="width: 30rpx;height: 30rpx;position: absolute;right: 0;top: -10rpx;z-index: 10;"
								@click.stop="titleImg=''"></image>
							<image :src='titleImg' mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
						</view>
						<view style="width: 150rpx;
height: 150rpx;
background: #F7F7F7;
display: flex;
align-items: center;
justify-content: center;
" @click="uploadImgTitleImg" v-if='titleImg==""'>
							<image src='../../static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"></image>
						</view>

					</view>


					<!-- #endif -->
				</view>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text">剧照</view>
				<view class="valuscss">
					<!-- #ifdef MP-WEIXIN -->
					<!-- 	<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image style="width: 111rpx;height: 111rpx;" :src="bannerImg?bannerImg:require('@/hl/upload_logo.png')"></image>
					</button> -->
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view style="display: flex;flex-wrap: wrap;">

						<view v-for='(item, index) in bannerImg' :key='index'
							style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;"
							@click.stop="previewImage(index,bannerImg)">
							<image src='../../static/images/me/closeIconss.png'
								style="width: 30rpx;height: 30rpx;position: absolute;right: 0;top: -10rpx;z-index: 10;"
								@click.stop="bannerImg.splice(index,1)"></image>
							<image :src='item' mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
						</view>

						<view style="width: 150rpx;
						height: 150rpx;
						background: #F7F7F7;
						display: flex;
						align-items: center;
						justify-content: center;
						" @click="uploadImgBannerImg">
							<image src='../../static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"></image>
						</view>


					</view>

					<!-- #endif -->
				</view>
			</view>
			<!-- <view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">购买剧价格</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="decimal" v-model="price" placeholder="请输入购买剧价格" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">购买次数</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="number" v-model="payNum" placeholder="请输入购买次数" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">播放量</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="number" v-model="viewCounts" placeholder="请输入播放量" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">排序</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="number" v-model="sort" placeholder="请输入排序" />
					</view>
				</view>
			</view> -->
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">标签</view>
				
				<!-- <view class="type_item_box">
					<view class="t_item" v-for="(item, index) in privilegeList" :key="index" :class='item.checked?"active":""' @click="chooseLable(item,index)">#{{item.label}}</view>
				<view class="label_text">标签</view> -->

				
				<view class="valuscss">
					<view class="cu-form-group">
						<u-checkbox-group @change="checkboxGroupChange" v-model="labelRadio">
							<u-checkbox v-model="item.checked" v-for="(item, index) in privilegeList" :key="index"
								:name="item.label" style="margin-right: 10rpx;">{{item.label}}</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
			<!-- <view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">是否收费</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<u-radio-group v-model="isPrice">
							<u-radio name="1">
								是
							</u-radio>
							<u-radio name="2">
								免费
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view> -->
			<view class="usermain-item item-padding u-border-bottom"
				style="display: flex;align-items: center;justify-content: space-between;">
				<view class="label_text" style="padding-bottom: 0 !important;">是否完结</view>
				<view>
					<u-radio-group v-model="over" @change="showMsg">
						<u-radio name="1" activeColor="#FD7885">
							是
						</u-radio>
						<u-radio name="2" activeColor="#FD7885" style="margin-left: 25rpx;">
							否
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- <view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">人群分类</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<u-radio-group v-model="genderType">
							<u-radio name="0">
								男生爱看
							</u-radio>
							<u-radio name="1">
								女生爱看
							</u-radio>
							<u-radio name="2">
								其他
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">收费分类</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<u-radio-group v-model="chargeType">
							<u-radio name="0">
								会员专区
							</u-radio>
							<u-radio name="1">
								金豆专区
							</u-radio>
							<u-radio name="2">
								其他
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">发布年份</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<picker :value="createYearIndex" :range="yearListDate" @change="changeYear">
							<view v-if='createYearIndex==null' style="color: grey;">请选择发布年份</view>
							<view v-else>{{yearListDate[createYearIndex]}}</view>
						</picker>
					</view>
				</view>
			</view> -->
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">视频介绍</view>
				<view class="cu-form-group">
					<u-input v-model="details" type="textarea" style="padding: 0 !important;margin: 0 !important;" />
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="usermain-btn" @click="messagebtn()">立即提交</view>
		</view>
		
		</view>
	</view>
	</view>
</template>

<script>
	import configdata from '../../common/config.js';
	export default {
		data() {
			return {
				phone: '',
				headImg: '../../static/images/logo.png',
				userName: '',
				nickName: '',
				userId: '',
				realName: '',
				weChatId: "",
				password: '',
				platform: '',
				createTime: '',
				money: '',
				jiFen: '',
				status: '',
				zhiFuBao: '',
				zhiFuBaoName: '',
				list: [],
				show: true,
				mode: 'range',
				typeRadio: '',
				labelRadio: [],
				// 添加
				classifyId: '',
				title: '',
				titleImg: '',
				bannerImg: [],
				price: '2',
				payNum: '9999',
				viewCounts: 0,
				sort: 0,
				courseLabel: '',
				courseLabelIds: '',
				courseId: '', //短剧id
				isPrice: 1, //是否收费
				over: 2,
				genderType: null,
				chargeType: null,
				createYear: null,
				createYearIndex: null,
				status: 2, //上下架 1：上架 2：下架
				details: '', //短剧介绍
				yearListDate: ['2024', '2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014',
					'2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002',
					'2001', '2000', '1999', '1998', '1997', '1996', '1995'
				],
				privilegeList: [ //标签
					{
						id: 13,
						label: '家庭情感',
						checked: false,
					}, {
						id: 25,
						label: '年代',
						checked: false,
					},
					{
						id: 34,
						label: '古装',
						checked: false,
					},
					{
						id: 46,
						label: '其他',
						checked: false,
					},
				]
			};
		},
		onLoad(e) {
			console.log("-----onLoad----")
			this.getCourseClassification()
		},
		onShow() {
			this.getUserInfo()
			console.log("-----onShow----")
		},
		methods: {
			//获取类别
			changeType(e) {
				let obj = this.list.find(item => item.classificationName === e)
				this.classifyId = obj.classificationId
			},
			chooseType(e) {
				this.classifyId = e.classificationId
			},
			showMsg() {
				if (this.over == 1) {
					uni.showToast({
						title: '仔细审查上传的所有集数、排序、标题；如有错误会被平台删除。示例：标题为第1集，排序就是1 ；标题填写第2集，排序就是2；以此类推 上传每集的视频则是对应的视频 一定上传完整部短剧上，才可以点完结。',
						icon: "none",
						duration: 3000,
					})
				}
			},
			getUserInfo() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			// 获取发布年份
			changeYear(e) {
				this.createYearIndex = e.detail.value
				this.createYear = this.yearListDate[e.detail.value]
			},
			chooseLable(e, index) {
				this.privilegeList[index].checked = !this.privilegeList[index].checked
				this.labelRadio = []
				this.courseLabel = []
				for (var i in this.privilegeList) {
					if (this.privilegeList[i].checked) {
						this.labelRadio.push(this.privilegeList[i].label)
						this.courseLabel.push(this.privilegeList[i].label)
					}
				}
			},
			// 获取多选标签
			checkboxGroupChange(e) {
				console.log(e)
				this.courseLabel = e
				this.labelRadio = e
			},
			//放大图片
			previewImage(e, url) {
				uni.previewImage({
					urls: url,
					current: e
				});
			},
			// 分类管理 获取
			getCourseClassification() {
				this.$u.get("/courseClassification/selectCourseClassification?page=1&limit=50&classificationName=").then(
					res => {
						if (res.code === 0) {
							this.list = res.data.list
						}
					});
			},
			// titleImg
			onChooseTitleImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.titleImg = url.data
						uni.hideLoading();
					}
				});

			},
			// bannerImg
			onChooseBannerImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.bannerImg.push(url.data)
						uni.hideLoading();
					}
				});

			},
			uploadImgTitleImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.titleImg = url.data
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},
			//统一登录跳转
			goLoginInfo() {
				uni.navigateTo({
					url: '/pages/public/loginphone'
				});
			},
			uploadImgBannerImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										that.bannerImg.push(url.data)
										uni.hideLoading();
									}
								});
							}
						});
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// getUserInfo() {
			// 	let userId = uni.getStorageSync('userId')
			// 	this.$u.api.userinfo().then(res => {
			// 		if (res.code == 0) {
			// 			this.userName = res.data.userName;
			// 			this.phone = res.data.phone;
			// 			this.phones = res.data.phone
			// 			this.headImg = res.data.avatar;
			// 		}
			// 	})
			// },
			//根据正则验证手机号是否正确包括校验长度
			checkPhone(phone) {
				return /^1[3456789]\d{9}$/.test(phone);
			},

			// getCurrentOrder() {
			// 	this.$u.get("/app/VipDetailsSpread/queryCurrentSpreadOrderInfo").then(
			// 		res => {
			// 			if (res.code === 0) {
			// 				this.thisclassifyId = ''
			// 				this.title = ''
			// 				this.bannerImg = []
			// 				this.titleImg = ''
			// 				this.price = '2'
			// 				this.payNum = '10'
			// 				this.viewCounts = 0
			// 				this.sort = 0
			// 				this.courseLabel = ''
			// 				this.courseLabelIds = ''
			// 				this.isPrice = 1
			// 				this.over = 2
			// 				this.genderType = null
			// 				this.chargeType = null
			// 				this.createYear = null
			// 				this.createYearIndex = null
			// 				this.status = 2
			// 				this.details = ''
			// 				this.typeRadio = ''
			// 				this.labelRadio = []
			// 				for (var i in this.privilegeList) {
			// 					this.privilegeList[i].checked = false
			// 				}
			// 				if (res.data) {

			// 				} else {
			// 					setTimeout(function() {
			// 						uni.navigateTo({
			// 							url: '/create/course/index'
			// 						});
			// 					}, 1000)
			// 				}
			// 			} else {

			// 			}
			// 		});
			// },
			// 保存
			messagebtn() {

				if (this.classifyId == '') {
					uni.showToast({
						title: "请选择分类",
						icon: "none"
					})
					return
				} else if (this.title == '') {
					uni.showToast({
						title: "请输入标题",
						icon: "none"
					})
					return
				} else if (this.titleImg == '') {
					uni.showToast({
						title: "请上传封面图",
						icon: "none"
					})
					return
				} else if (this.bannerImg.length == 0) {
					uni.showToast({
						title: "请上传剧照",
						icon: "none"
					})
					return
				} else if (this.price == '') {
					uni.showToast({
						title: "请输入购买剧价格",
						icon: "none"
					})
					return
				} else if (this.payNum == '') {
					uni.showToast({
						title: "请输入购买次数",
						icon: "none"
					})
					return
				} else if (this.courseLabel.length == 0) {
					uni.showToast({
						title: "请选择标签",
						icon: "none"
					})
					return
				}


				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定提交信息？',
					confirmColor: '#8B8FF0',
					success: e => {
						if (e.confirm) {
							this.courseLabelIds = []
							for (var i in this.privilegeList) {
								for (var a in this.courseLabel) {
									if (this.privilegeList[i].label == this.courseLabel[a]) {
										this.courseLabelIds.push(this.privilegeList[i].id)
									}
								}
							}

							this.$u.post("/app/user/insertCourseByApp", {
								classifyId: this.classifyId,
								title: this.title,
								bannerImg: this.bannerImg.join(','),
								titleImg: this.titleImg,
								price: this.price,
								payNum: this.payNum,
								viewCounts: this.viewCounts,
								sort: this.sort,
								courseLabel: this.courseLabel.join(','),
								courseLabelIds: this.courseLabelIds.join(','),
								isPrice: this.isPrice,
								over: this.over,
								genderType: this.genderType,
								chargeType: this.chargeType,
								createYear: this.createYear,
								status: 2,
								details: this.details,
								// 固定传参
								img: '',
								msgUrl: '',
								courseId: '',
								courseType: 1,
								isRecommend: 0,
								remark: '',
								bannerId: ''
							}).then(res => {
								if (res.code === 0) {
									uni.showToast({
										title: '剧集保存成功',
										icon: "none"
									})

									this.thisclassifyId = ''
									this.title = ''
									this.bannerImg = []
									this.titleImg = ''
									this.price = '2'
									this.payNum = '10'
									this.viewCounts = 0
									this.sort = 0
									this.courseLabel = ''
									this.courseLabelIds = ''
									this.isPrice = 1
									this.over = 2
									this.genderType = null
									this.chargeType = null
									this.createYear = null
									this.createYearIndex = null
									this.status = 2
									this.details = ''
									this.typeRadio = ''
									this.labelRadio = []

									setTimeout(function() {
										uni.navigateTo({
											url: '/me/create/course/index'
										});
									}, 1000)

								} else if (res.code === -1) {
									uni.showModal({
										title: '温馨提示',
										content: res.msg,
										cancelText: "取消", // 取消按钮的文字
										confirmText: "去商城", // 确认按钮的文字 
										confirmColor: '#8B8FF0',
										success: e => {
											if (e.confirm) {
												uni.navigateTo({
													url: '/me/shop/index'
												});
											}
										}
									});

								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 5000
									})
								}
							});
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background: #F7F8FF;
	}
	
	.type_item_box{
		display: flex;
		flex-wrap: wrap;
		.t_item{
			height: 50rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			padding: 0 30rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.active{
			background: #FAEAEC;
		}
	}

	

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		overflow: hidden;
		color: #666666;
		/* background-color: #fff; */
		background-color: rgba(255, 255, 255, 0) !important;
		width: 100%;
		height: 100%;
	}

	.usermain {
		/* background: #FFFFFF; */
	}

	.usermain-item {
		/* display: flex; */
		/* align-items: center; */
		padding: 26rpx 16rpx 26rpx 16rpx;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		/* border-bottom: 2rpx solid #f2f2f2; */
	}

	.usermain-item.item-padding {
		/* padding: 10rpx 40rpx 10rpx 0; */
	}

	.valuscss {
		width: 80%;
	}

	.cu-form-group {
		padding: 0;
		background: #FFFFFF;
		/* text-align: right; */
	}

	.cu-form-group input {
		background: #FFFFFF;
		font-size: 28rpx;
		color: #333333;

	}

	.footer-btn {
		margin-top: 40rpx;
	}

	.footer-btn .usermain-btn {
		color: #FFFFFF;
		background: linear-gradient(90deg, #ff7581, #f8a5af);
		text-align: center;
		width: 686rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		margin: 0 auto;
		border-radius: 40rpx;
	}

	.label_text {
		font-weight: bold;
		font-size: 28rpx;
		color: #1A1A1A;
		padding-bottom: 26rpx;
	}
</style>